<template>
	<div class="com-con fdisc">
		<div style="width: 100%;height: 400px;">Vuetify内容{{ $vuetify.theme.themes.dark }}</div>

		<div>
			<v-card>
				<v-btn @click="toggleTheme">切换</v-btn>
			</v-card>
		</div>
	</div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useTheme, useDisplay } from "vuetify";
import {useRouter} from "vue-router"
let theme = useTheme();
let router = useRouter()
onMounted(() => {
	// console.log("vuetify", useDisplay());
	// console.log("theme", theme);
	// console.log("get vuetify", useDisplay().name.value);
	let width = {
		xs: "100%",
		sm: "100%",
		md: "300px",
		lg: "300px",
		xl: "300px",
	};
	// console.log(width[useDisplay().name.value]);
	console.log("router",router.currentRoute.value.query)
});

function toggleTheme() {
	//console.log("theme", theme.themes.value.dark.dark);
	theme.themes.value.dark.dark = ! theme.themes.value.dark.dark;
}
</script>

<style lang="scss" scoped>
.com-con {
	width: 100%;
	height: 100vh;
	color: black;
	font-size: 24px;
}
</style>
